<template>
  <div class="shopcart">
<ul>
  <li v-for="item in shopcart" :key="item.id">
    <img :src="item.src">
    <div>
      <p>{{item.title}}x{{item.num}}</p>
      <p>{{item.price}}</p>
      <p><button @click="del(item)">删除</button></p>
    </div>
  </li>
</ul>
<p v-if="shopcart.length">总结:{{totalPrice}}</p>
<p v-else>购物车暂无商品</p>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'ShopCart',
  computed:{
    shopcart(){
      return this.$store.state.shopcart
    },
    totalPrice(){
      return this.$store.getters.totalPrice
    }
  },
  // computed:{
  //   ...mapState(['shopcart']),
  //   ...mapGetters(['totalPrice'])
  // },
  methods:{
    del(item){
      this.$store.commit('del',item);
    }
  }

}
</script>
<style scoped>
.shopcart{
  width: 100%;
  padding-bottom:50px;

}
li{
  position:relative;
  border-bottom: 1px dashed #ccc;
}
li div{
  display: inline-block;
  top: 10px;
  position: absolute;
  width: 120px;
  line-height: 30px;
  font-size: 14px;

}
img{
  width: 100px;
  border:1px solid #ccc;
  margin: 10px 10px 8px 10px;
}
li div p:nth-child(2){
  color: #f00;
}
button{
  color:white;
  background: coral;
  border:none;
  padding: 5px;
}
</style>
